{# {% extends "layout.html" %} #}
<script>
$(document).ready(function() {
	$(":checkbox").change(function() {
		var id = this.value;
		var id_incompat = this.id;
		
		// créer la variable avec les incompatibilités
		var chkId = '';
		$('.chk:checked').each(function() {
		  chkId += this.id + ",";
		});
		// retire la dernière virgule
		chkId = chkId.slice(0,-1);
		//créé le tableau
		var array = chkId.split(",");
		//console.log(array);
		//console.log(id);
		
		//compare les incompatibilités
		if(jQuery.inArray(id, array) != -1) {
			console.log("est incompatible");
			if (document.getElementById(this.id).checked) 
			{
				alert("Options Incompatibles");
				document.getElementById("creation").disabled = true; //désactive le bouton de validation
			}else{
				document.getElementById("creation").disabled = false; //active le bouton de validation
			}
		} else {
			console.log("est compatible");
			document.getElementById("creation").disabled = false; //active le bouton de validation
		}
	});
});
</script>
<div class="control-group">

	<label class="control-label" for="options_mobile_incluses">Option(s) Incluse(s)</label>
    
	<div class="controls">
        {% for option_incluse in options_incluses %}
        	<input type="hidden" name="option_fixe_{{type}}_incluses[]" value="option_incluse.0.id"/>
            {{option_incluse.0.nom}}  <br>
        {% endfor %}
	</div>
</div>    
<div class="control-group">
	<label class="control-label" for="options_mobile">Option(s) disponible(s)</label>
    
	<div class="controls">
        {% for option in options %}
            {% if option.id in options_incompat %}
            <div class="span3">
            <label class="checkbox inline" for="option_fixe{{option.id}}">
            <input type="checkbox" id="{{option.incompatibilite}}" name="option_fixe_{{type}}[]" value="{{option.id}}" class="chk" {% if option.id in tab_options_ligne %}checked{% endif %}/> {{option.nom}}  
            </label>
            </div>
            {% endif %}
        {% endfor %}
	</div>
   
</div>

</fieldset>

